<template>
	<view class="bg-light" style="min-height: 660px;">
		<tabsTop tabName="账单"></tabsTop>
		<!-- tab栏 -->
		<view class="row bg-white">
			<view class="button">下载</view>
			<view class="button" @click="toggleDropdown">
				<span v-bind:class="{ 'text-red': showDropdown, 'text-black': !showDropdown }">{{selectedOption}}</span>
			</view>
			<view style="width: 14%;"></view>
		</view>
		<!-- tab选项内容 -->
		<view v-if="showDropdown" class="mask" @click="toggleDropdown"></view>
		<view v-if="showDropdown" class="dropdown bg-white">
			<view class="tab-container">
				<view v-for="(option, index) in dropdownOptions" :key="index" class="tab"
					v-bind:class="{ 'active': selectedOption === option.name }" @click="selectOption(option)">
					{{ option.name }}
				</view>
			</view>
		</view>
		<!-- 账单 -->
		<view v-for="(item,index) in bill" :key="index">
			<!-- 切换年月 -->
			<view class="picker-container m-2">
				<picker mode="multiSelector" :range="pickerRange" :value="pickerValue" @change="onPickerChange">
					<view class="picker">
						{{item.selectedYear}}年{{item.selectedMonth}}月<uni-icons type="down" size="15"></uni-icons>
					</view>
				</picker>
				<view class="flex mt-1" style="font-size: 13px;">
					<view>收入￥{{item.revenue}}</view>
					<view class="ml-1">支出￥{{item.outlay}}</view>
				</view>
			</view>
			<!-- 订单内容 -->
			<view v-for="(ite,index) in item.order_details" :key="index" class="bg-white p-2">
				<view class="flex justify-between" style="font-size: 14px;">
					<view>{{ite.company_name}}</view>
					<view>{{ite.pay}}</view>
				</view>
				<view class="mt-1" style="font-size: 12px;">{{ite.time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import tabsTop from "@/components/tabs/tabs-top.vue";
	import {getJson} from "@/api/global.js"
	export default {
		components: { //轮播图组件
			tabsTop,
		},
		data() {
			const years = [];
			const months = [];
			const currentYear = new Date().getFullYear();
			for (let i = currentYear - 50; i <= currentYear + 50; i++) {
				years.push(i);
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i);
			}
			return {
				showDropdown: false, // 控制下拉面板的显示与隐藏
				selectedOption: '全部', // 选中的选项
				dropdownOptions: [],
				pickerRange: [years, months],
				pickerValue: [50, new Date().getMonth()], // 默认选中当前年份和月份
				selectedYear: currentYear,
				selectedMonth: new Date().getMonth() + 1,
				bill: [{
					selectedYear: "2023",
					selectedMonth: "4",
					revenue: "28.9",
					outlay: "28.9",
					order_details: [{
						company_name: "黑龙江小康龙江农业科技有限公司",
						pay: "28.9",
						time: "2023-04-07 12:17:16"
					}]
				},
				{
					selectedYear: "2021",
					selectedMonth: "2",
					revenue: "0",
					outlay: "20",
					order_details: [{
						company_name: "黑龙江小康龙江农业科技有限公司",
						pay: "28.9",
						time: "2021-02-07 12:17:16"
					}]
				}
				]
			}
		},
		onLoad() {
			this.getDropdownOptions()
		},
		methods: {
			toggleDropdown() {
				this.showDropdown = !this.showDropdown;
			},
			selectOption(option) {
				this.selectedOption = option.name;
				this.showDropdown = false;
			},
			async getDropdownOptions(){
				 const res = await getJson({
					File: 'hmgx/bill.json',
					Open_ID: app.globalData.Open_ID
				})
				if (res.Status == "success") {
					console.log('xxx',JSON.parse(res.Data));
					this.dropdownOptions = JSON.parse(res.Data) 
				}
			}
			onPickerChange(e) {
				const val = e.detail.value;
				this.selectedYear = this.pickerRange[0][val[0]];
				this.selectedMonth = this.pickerRange[1][val[1]];
				this.pickerValue = val; // 更新picker的value，确保界面显示与内部状态一致
			},
		}
	}
</script>

<style>
	.row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		z-index: 999;
		position: relative;
	}

	.button {
		padding: 10px;
		cursor: pointer;
	}

	.text-red {
		color: red;
	}

	.text-black {
		color: black;
	}

	.dropdown {
		/* padding: 10px;
		background-color: #f9f9f9;
		border: 1px solid #e2e2e2;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); */
		position: relative;
		z-index: 999;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}

	.tab-container {
		display: flex;
		flex-wrap: wrap;
	}

	.tab {
		flex: 0 0 calc(26% - 10px);
		margin: 5px;
		padding: 10px;
		background-color: #fff;
		text-align: center;
	}

	.tab:last-child {
		border-bottom: none;
	}

	.active {
		background-color: blue;
		color: white;
	}
</style>